<template>
	<view>
		<view class="msg" v-for="(item,index) in menu">
			<view class="date">
				2020-02-20
			</view>
			<view class="title">
				<view class="content">
					{{item.content}}
				</view>
				
				<view class="xian"></view>
				
				<view class="have">
					查看更多
					<image src="../../static/users/right.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menu:[{content:"这是一个系统消息标题，这是一个系统消息标题，这是一个系统消息标题，这是一个系统消息标题..."},
				{content:"这是一个系统消息标题，这是一个系统消息标题，这是一个系统消息标题，这是一个系统消息标题..."},
				{content:"这是一个系统消息标题，这是一个系统消息标题，这是一个系统消息标题，这是一个系统消息标题..."},]
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
page{
	background-color: #F2F4FA;
	padding: 28rpx 40rpx 0 40rpx;
}
.msg{
	margin-top:40rpx ;
	width: 670rpx;
	.date{
		margin: 40rpx 0 30rpx 276rpx;
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 300;
		color: #666666;
	}
	.title{
		width: 670rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		padding: 29rpx 33rpx  30rpx 31rpx;
		.content{
			width: 606rpx;
		
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #181818;
			line-height: 40rpx;
		}
		.xian{
			margin: 29rpx 0 20rpx 0rpx;
			width: 610rpx;
			height: 1rpx;
			background: #E5E5E5;
		}
		.have{
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 300;
			color: #666666;
			image{
				margin-left: 10rpx;
				width: 8rpx;
				height: 15rpx;
			}
		}
	}
}
</style>
